You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.5 KiB
117 lines
4.5 KiB
<template>
|
|
<div class="flex flex-col w-full md:w-3/4 m-auto md:pt-[70px] pt-[60px]">
|
|
|
|
<Breadcrumb :data="form" />
|
|
|
|
<!-- <ProductShopInfo :data="goods?.merchant" />-->
|
|
|
|
<div class="bg-white p-4 mt-4 flex gap-xl rounded-xl" v-if="goods">
|
|
<div class="goods-image flex gap-xl">
|
|
<div class="gap-xs flex flex-col">
|
|
<el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
|
|
</div>
|
|
<el-image :src="goods.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image>
|
|
</div>
|
|
<div class="goods-info flex flex-col gap-xs">
|
|
<div class="goods-name text-2xl">{{ goods.goodsName }}</div>
|
|
<div class="goods-price text-2xl red">￥{{ goods?.salePrice * goods?.num }}</div>
|
|
<div class="text-green-7">购买得积分</div>
|
|
<div class="text-gray-4">配送：无需配送</div>
|
|
<div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
|
|
<div class="text-gray-4">销量： {{ goods.sales }}</div>
|
|
<template v-for="spec in goods.goodsSpecValue">
|
|
<div class="flex items-center">
|
|
<div class="text-gray-4">{{ spec.value }}：</div>
|
|
<el-radio-group v-model="goods.radio">
|
|
<el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</template>
|
|
<div class="text-gray-4">
|
|
已选中：{{ goods.radio }}
|
|
</div>
|
|
<div class="text-gray-4">
|
|
数量：
|
|
<el-input-number v-model="goods.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
|
|
</div>
|
|
<div class="py-5">
|
|
<el-button-group size="large">
|
|
<el-button type="danger">立即购买</el-button>
|
|
<el-button type="warning">加入购物车</el-button>
|
|
</el-button-group>
|
|
<el-button size="large" class="ml-3">收藏</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content p-4 bg-white mt-4 rounded-xl">
|
|
<el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
|
|
<el-tab-pane label="参数信息" name="parameter">
|
|
<el-descriptions class="margin-top" title="参数信息" :column="1" border>
|
|
<el-descriptions-item label="品牌">websoft</el-descriptions-item>
|
|
<el-descriptions-item label="版本">2.0</el-descriptions-item>
|
|
<el-descriptions-item label="开发语言">Java、Vue3、Nuxt</el-descriptions-item>
|
|
<el-descriptions-item label="版本">
|
|
<el-tag size="small">授权版</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="图文详情" name="content">
|
|
<div class="files flex flex-col w-3/4" v-if="goods?.files">
|
|
<el-image v-for="item in JSON.parse(goods.files)" :src="item.url" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="用户评价" name="reviews">用户评价</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div v-if="!form">
|
|
<el-empty description="404 页面不存在"></el-empty>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {ApiResult} from "~/api";
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {Goods} from "~/api/shop/goods/model";
|
|
import Breadcrumb from "~/components/Breadcrumb.vue";
|
|
import type {Navigation} from "~/api/cms/navigation/model";
|
|
|
|
const route = useRoute();
|
|
const { query, params } = route;
|
|
const { name: productName } = params;
|
|
const activeName = ref('parameter');
|
|
const rate = ref(4);
|
|
|
|
|
|
// 页面信息
|
|
const form = ref<Navigation>();
|
|
// 商品信息
|
|
const goods = ref<Goods>();
|
|
|
|
// TODO 请求导航页面数据
|
|
const pathName = window.location.pathname;
|
|
console.log(pathName)
|
|
const split = pathName.split('/');
|
|
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{
|
|
query: {
|
|
path: pathName
|
|
}
|
|
})
|
|
if(nav.value?.data){
|
|
form.value = nav.value.data;
|
|
}
|
|
|
|
// TODO 获取商品详情
|
|
const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName)
|
|
goods.value = info.value?.data;
|
|
goods.value.num = 1;
|
|
|
|
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|